import { ControlBase } from "./ControlBase.js";

/**
 * 按钮控件类
 * 提供一个可点击的按钮控件
 * @class
 * @example
 * // 创建按钮控件
 * const buttonControl = new CesiumExtensions.control.ButtonControl({
 *   icon: "https://data.mars3d.cn/img/control/homeButton.svg",
 *   title: "返回首页",
 *   insertIndex: 0,
 *   click: function () {
 *     // 点击事件处理逻辑
 *   },
 * });
 * buttonControl.init(viewer);
 * buttonControl.show();
 */
export class ButtonControl extends ControlBase {
  /**
   * 构造函数
   * @constructor
   * @param {Object} options - 控件配置选项
   * @param {string} options.icon - 工具栏按钮图标
   * @param {string} options.title - 工具栏按钮标题
   * @param {string} options.className - 工具栏按钮类名
   * @param {number} options.insertIndex - 工具栏按钮插入索引
   * @param {function} options.click - 工具栏按钮点击事件
   */
  constructor(options = {}) {
    super(options);
    // 存储点击事件处理函数，以便在销毁时移除
    this._clickHandler = null;
  }
  
  /**
   * 初始化控件
   * @param {external:Cesium.Viewer} viewer - Cesium Viewer实例
   * @returns {this}
   */
  init(viewer) {
    // 调用父类的init方法
    super.init(viewer);
    
    // 创建按钮元素
    const button = document.createElement("button");
    button.type = "button";
    button.innerHTML = `<img class="cesium-svgPath-svg" src="${this.options.icon}" style="scale:0.7" />`;
    button.title = this.options.title;
    button.className = "cesium-button cesium-toolbar-button";
    
    if (this.options.className) {
      button.classList.add(this.options.className);
    }
    
    // 添加点击事件
    if (this.options.click) {
      this._clickHandler = this.options.click;
      button.addEventListener("click", this._clickHandler);
    }
    
    // 将按钮添加到工具栏
    const container = viewer.container.getElementsByClassName(
      "cesium-viewer-toolbar"
    )[0];
    
    if (this.options.insertIndex) {
      container.insertBefore(
        button,
        container.children[this.options.insertIndex]
      );
    } else {
      container.appendChild(button);
    }
    
    // 设置容器引用，使基类的show/hide/destroy方法可用
    this._setContainer(button);
    
    return this;
  }
  
  /**
   * 销毁控件，清理资源
   * @returns {void}
   */
  destroy() {
    // 移除事件监听器
    const container = this._getContainer();
    if (container && this._clickHandler) {
      container.removeEventListener("click", this._clickHandler);
      this._clickHandler = null;
    }
    
    // 调用父类的destroy方法清理DOM和引用
    super.destroy();
  }
}

